<template>
<!--公告管理组件-->
<!--  功能：-->
<!--  1.颁发公告-->
<!--  2.查看所有公告-->
<!--  3.删除公告-->
  <div>
    <div>
      <h3>公告管理</h3>
      <Button @click="createNotice">发布公告</Button>
      <div v-if="show" class="notice">
        <Input type="textarea" v-model="content" size="small" rows="5" placeholder="请输入公告内容" style="width:400px;"></Input>
        <div style="justify-content: space-between;">
          <Button @click="reset">取消</Button><Button @click="send">发布</Button>
        </div>
      </div>
    </div>
    <div id="notice" v-for="item in notices" :key="item.id">
      <div id="notice_content">
        {{item.noticeContent}}
      </div>
      <div id="notice_info">
        {{item.noticePublisherId}}:{{item.createTime}}
        <Button type="text" @click="deleteNotice(item.id)">删除</Button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Notice",
  data(){
    return{
      show:false,
      content:'',//要发布的公告内容
      notices:[
        {
          noticeContent:'公告内容',
          createTime:'发布时间',
          noticePublisherId:'发布者'
        }
      ],//存储公告的数组
    }
  },
  methods:{
    createNotice(){
      this.show = true
    },
    reset(){
      this.show = false
    },
    send(){
      let params = new URLSearchParams()
      params.append('content',this.content)
      params.append('id',sessionStorage.getItem('userId'))
      this.$http.post('/api/createNotice',params).then(res=>{
        if(res.data.code === 200){
          this.$Message.success(res.data.codeInfo)
          this.show = false
          this.$http.get('/api/getAllNotice').then(res=>{
            this.notices = res.data.data.Notices
          }).catch(error=>{
            console.log(error)
          })

        }
      }).catch(error=>{})


    },
    deleteNotice(id){
      let params = new URLSearchParams()
      params.append('id',id)
      this.$http.post('/api/deleteNotice',params).then(res=>{
        if(res.data.code === 200){
          this.$Message.success("删除成功")
          this.$http.get('/api/getAllNotice').then(res=>{
            this.notices = res.data.data.Notices
          }).catch(error=>{
            console.log(error)
          })
        }
      }).catch(error=>{
        console.log(error)
      })
    }
  },
  mounted() {
    //获取所有公告
    this.$http.get('/api/getAllNotice').then(res=>{
      this.notices = res.data.data.Notices
    }).catch(error=>{
      console.log(error)
    })

  }
}
</script>

<style scoped>
.notice{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
}


</style>
